<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * { /*清空默认的内外边距  几乎是我们写css必须写的*/
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;    /*去掉ul前面的小圆点*/
    }
    .searchPic {
      width: 238px;
      height: 294px;
      border: 1px solid #D9E0EE;
      border-top: 3px solid #FF8400; /*这句话要放放到border的下面 因为css具有层叠性，按就近原则来，
      会覆盖前面相同的样式。*/
      margin: 100px;
    }
    .searchPic h3 {
      height: 35px;
      line-height: 35px;    /*让行高等于高度，可以让文字垂直居中显示*/
      border-bottom: 1px solid #D9E0EE;
      font-size: 16px;
      font-weight: normal; /*让粗体不变粗*/
      padding-left: 12px;  /*因为这个h3没有给定宽度，继承父亲的宽度，所以padding就不会撑开盒子了*/
    }
    .searchPic img {
      margin: 7px 0 0 8px;
    }
    .searchPic ul li a{
      font-size: 12px;
      color: #666;
      text-decoration: none;    /*去掉下划线*/
    }
    .searchPic ul {
      margin-left: 8px;
    }
    .searchPic ul li {
      padding-left: 10px;
      height: 26px;
      line-height: 26px;
      background: url("../image/example-image/square.png") no-repeat left center;/* 背景设置*/
    }
    .searchPic li a:hover {
      text-decoration: underline; /*添加下划线*/
      color: #FF8400;
    }
  </style>
</head>
<body>
 <div class="searchPic">
   <h3>搜索趣图</h3>
   <img src="../image/example-image/happy.gif" alt="">
   <ul>
     <li><a href="#">梵净山，贵州最独特的一个地标</a></li>
     <li><a href="#">梵净山，贵州最独特的一个地标</a></li>
     <li><a href="#">梵净山，贵州最独特的一个地标</a></li>
   </ul>
 </div>
</body>
</html>
